<!--  
  一、vue3的响应式的实现
  在vue3中响应式的实现通过两种方式实现
  1、ref:定义基本类型的响应式
  2、reactive：定义对象使用的
  二、ref的使用步骤
  第1步：在vue依赖包中导入ref函数
  import {ref} from 'vue'
  第2步：调用ref来定义响应式数据
  let 响应式变量=ref<类型>(初始值)
  第3步：使用
  在js代码部分使用：对 响应式变量.value进行更新，而<template>部分不要使用value
  三、reactive的使用
  使用的步骤
  第1步：导入reactive
  import {reactive} from 'vue'
-->
 <template>
    <div>
      <h1>个人简介</h1>
      <div>姓名:{{person.name }}</div>
      <div>
        年龄:{{person.age }}
        <button @click="incrementAge">+</button>
      </div>
      <div>性别:{{person.gender==1?'男':'女'}}</div>
      <div>职业:{{person.job }}</div>
    </div>
 </template>
 <script lang="ts" setup>
   import {reactive} from 'vue'
   import {PersonType} from '@/types/Person'
   let person=reactive<PersonType>({
     name:'Giles',
     age:29,
     gender:1,
     job:'teacher'
   })
   const incrementAge=()=>{
    person.age++
   }
 </script>
 <style></style>